<template>
  <div ref="dom" class="charts chart-pie" style="height:100%"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
// import { on, off } from '@/libs/tools'
echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartPan',
  props: {
    value: String,
    text: String,
  },
  data () {
    return {
      dom: null,
    }
  },
  methods: {
    resize () {
      this.dom.resize()
    },
    drawPie()
    {
        this.$nextTick(() => {
        // let legend = this.value.map(_ => _.name)
        
        let option = option = {
    tooltip: {
        formatter: '{a} <br/>{b} : {c}%',
    },
    // toolbox: {
    //     feature: {
    //         restore: {},
    //         saveAsImage: {}
    //     }
    // },
    series: [
        {
          name: this.text,
          type: 'gauge',
          detail: {formatter: '{value}%', fontSize:'15',fontWeight: 'bolder',
                fontFamily: 'Arial',
                color: '#eee'},
          axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[0.3, 'lime'], [0.7, '#1e90ff'], [1, '#ff4500']],
                    width: 7,
                    shadowColor: '#fff', //默认透明
                }
            },
            label: {
                normal:{
                  show:true,
                  formatter:'{b}',
                },
              },
           splitLine: {           // 分隔线
                length: 5,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                    color: 'auto'
                }
            },
            pointer: {
                width: 5
            },
          data: [{value: this.value}]
        },
      ]
  };
        this.dom = echarts.init(this.$refs.dom, 'tdTheme')
        this.dom.setOption(option)
        // on(window, 'resize', this.resize)
      })
    }
  },
  watch: {
      value: {
        handler(newValue) {
          this.value = newValue;  //把新值赋值给属性
          this.drawPie();  //刷新echarts图表
        },
        deep: true
      }
  },
  mounted () {
    this.drawPie();
  },
  beforeDestroy () {
    // off(window, 'resize', this.resize)
  }
}
</script>
